<template>
  <view>
    <view class="order-status-view">
      <view class="status-text-view">
        <view>
          <u-icon class="u-margin-right-10" size="36" :name="
                        order.order_operate_allowable_vo.allow_pay
                        || order.order_operate_allowable_vo.allow_ship
                        || order.order_operate_allowable_vo.allow_rog ? 'clock' : 'checkmark-circle'">
          </u-icon>
        </view>
        <view>
          {{order.order_type === 'PINTUAN' ? order.ping_tuan_status : order.order_status_text}}
        </view>
      </view>
      <view class="sub-text-view">
        <view class="sub-text" v-if="order.order_operate_allowable_vo.allow_pay">需付款{{order.need_pay_money}}</view>
        <view class="sub-text" v-if="order.order_operate_allowable_vo.allow_ship">等待商家发货</view>
        <view class="sub-text" v-if="order.order_operate_allowable_vo.allow_rog">等待您确认收货</view>
      </view>
    </view>
    <view v-if="order.order_operate_allowable_vo.allow_check_express" class="block-view">
      <view class="express-item u-flex u-row-between" @click="onExpress(order)">
        <view class="u-flex">
          <view>
            <u-image class="u-margin-left-30" width="45rpx" height="45rpx" src="/static/images/truck.png"></u-image>
          </view>
          <view class="express-text">
            <template v-if="express">
              <view class="u-line-2 text">{{express.name}}</view>
              <view class="time">{{express.courier_num}}</view>
            </template>
            <template v-else class="u-line-2 text">暂无物流信息，请您耐心等待~</template>
          </view>
        </view>
        <view>
          <u-icon color="#909399" name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <view class="block-view u-f-ac u-f-jsb" @click="goAddress(order.order_status_text)">
      <addr left_icon="/static/images/address.png" :name="order.ship_name" :mobile="order.ship_mobile"
        :addrs="order.ship_province +''+ order.ship_city +''+ order.ship_county" :addr="order.ship_addr">
      </addr>
      <view>
        <u-icon name="arrow-right" v-if="['待付款', '待发货'].includes(order.order_status_text)"></u-icon>
      </view>
    </view>
    <view v-model="order" class="u-margin-bottom-20">
      <view class="order-list-view">
        <view class="order-header">
          <view class="order-sn">
            <text>商品列表</text>
          </view>
        </view>
        <view class="goods-list-view" v-for="(sku,skuIndex) in order.order_sku_list" @click="onGoods(sku)"
          :key="skuIndex">
          <goods-info :goodsName="sku.name" :goodsNum="sku.num" :goodsPrice="sku.subtotal" :goodsImg="sku.goods_image"
            :goodsSpecList="sku.spec_list" :goodsPromotion="sku.promotion_tags" :goodsInfo="sku">
          </goods-info>
          <view class="u-flex u-row-right u-margin-bottom-10" v-if="sku.goods_operate_allowable_vo.allow_apply_service">
            <view>
              <u-button shape="circle" :custom-style="customStyle" @click="applySale(sku)">申请售后</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="u-margin-bottom-20" v-if="giftList || giftCoupon">
      <view class="order-gift-view">
        <view class="gift-header">
          <view class="gift-title">
            <text>赠品列表</text>
          </view>
        </view>
        <view class="gift-list-view" v-for="(gift,giftIndex) in giftList" v-if="giftList" :key="giftIndex">
          <view class="gift-img-view">
            <u-image border-radius="10" width="120rpx" height="120rpx" :src="gift.gift_img"></u-image>
          </view>
          <view class="gift-info-view">
            <view class="u-line-2">
              {{gift.gift_name}}
            </view>
          </view>
          <view class="gift-price-view">
            <custom-price :price="gift.gift_price" :fontWeight="600" size="30"></custom-price>
          </view>
        </view>
        <view class="gift-list-view" v-if="giftCoupon">
          <view class="gift-img-view">
            <u-image border-radius="10" width="120rpx" height="120rpx" src="/static/images/icon-color-coupon.png">
            </u-image>
          </view>
          <view class="gift-info-view">
            <view class="u-line-2">
              价值<text class="gift-coupon-price">{{giftCoupon.coupon_price | unitPrice('￥')}}</text>的补贴额度
            </view>
          </view>
        </view>
      </view>

    </view>
    <view v-model="order" class="block-view">
      <view class="block-item-view">
        <view class="title">订单编号：</view>
        <view class="value">{{order.sn}}</view>
      </view>
      <view class="block-item-view">
        <view class="title">下单时间：</view>
        <view class="value">{{$u.timeFormat(order.create_time,'yyyy-mm-dd hh:MM:ss')}}</view>
      </view>
      <u-line margin="30rpx 0rpx"></u-line>
      <view class="block-item-view">
        <view class="title">支付方式：</view>
        <view class="value">{{order.payment_type === 'COD' ? '货到付款' : '在线支付'}}</view>
      </view>
      <view class="block-item-view" v-if="order.payment_time">
        <view class="title">支付时间：</view>
        <view class="value">{{$u.timeFormat(order.payment_time,'yyyy-mm-dd hh:MM:ss')}}</view>
      </view>
      <view class="block-item-view" v-else-if="!order.need_pay_money">
        <view class="title">支付时间：</view>
        <view class="value">{{$u.timeFormat(order.create_time,'yyyy-mm-dd hh:MM:ss')}}</view>
      </view>
      <view class="block-item-view" v-else>
        <view class="title">支付状态：</view>
        <view class="value">未支付</view>
      </view>
      <view class="block-item-view" v-if="order.order_status_text == '已取消' ? true : false">
        <view class="title">取消原因：</view>
        <view class="value">{{order.cancel_reason}}</view>
      </view>
      <u-line margin="30rpx 0rpx"></u-line>
      <view class="block-item-view">
        <view class="title">配送方式：</view>
        <view class="value">{{order.logi_name == null?'暂无配送方式':order.logi_name}}</view>
      </view>
      <view class="block-item-view" v-if="order.ship_time">
        <view class="title">发货时间：</view>
        <view class="value">{{$u.timeFormat(order.ship_time,'yyyy-mm-dd hh:MM:ss')}}</view>
        <!-- <view class="value">{{$u.timeFormat(order.ship_time,'yyyy-mm-dd hh:MM:ss') ==null ? '未发货': $u.timeFormat(order.ship_time,'yyyy-mm-dd hh:MM:ss') }}</view> -->
      </view>
      <u-line margin="30rpx 0rpx"></u-line>
      <view class="block-item-view">
        <view class="title">订单备注：</view>
        <view class="value">{{$u.test.isEmpty(order.remark)? '无备注':order.remark}}</view>
      </view>
      <view class="block-item-view">
        <view class="title">发票信息：</view>
        <view class="value click-color" v-if="order.receipt_history && order.receipt_history.receipt_title"
          @click="onReceipt">查看发票</view>
        <view class="value" v-else>未开发票</view>
      </view>
    </view>
    <view class="block-view">
      <view>
        <view class="block-item-space-between-view ">
          <view class="title">商品总额：</view>
          <custom-price textColor="#333333" :price="order.goods_original_total_price" fontWeight="600" :size="32">
          </custom-price>
        </view>
        <view class="block-item-space-between-view ">
          <view class="title">保价费用：</view>
          <custom-price textColor="#333333" :price="tradeAddins.insurance" fontWeight="600" :size="32"></custom-price>
        </view>
        <view class="block-item-space-between-view ">
          <view class="title">加工费：</view>
          <custom-price textColor="#333333" :price="tradeAddins.process" fontWeight="600" :size="32"></custom-price>
        </view>
        <view class="block-item-space-between-view " v-if="order.coupon_price">
          <view class="title">补贴额度抵扣：</view>
          <custom-price textColor="#333333" :price="order.coupon_price" fontWeight="600" :size="32"></custom-price>
        </view>
        <view class="block-item-space-between-view " v-if="order.cash_back">
          <view class="title">返现金额：</view>
          <custom-price textColor="#333333" :price="order.cash_back" fontWeight="600" :size="32"></custom-price>
        </view>
        <view class="block-item-space-between-view " v-if="order.use_point">
          <view class="title">代金券抵扣：</view>
          <view style="font-size:30rpx;">-{{ order.use_point }}代金券</view>
        </view>
        <view class="block-item-space-between-view ">
          <view class="title">运费：</view>
          <custom-price textColor="#333333" :price="order.shipping_price" fontWeight="600" :size="32"></custom-price>
        </view>
        <view class="block-item-space-between-view ">
          <view class="title"></view>
          <view class="value u-flex">
            <view>在线支付金额：</view>
            <custom-price :price="order.need_pay_money" fontWeight="600" :size="40"></custom-price>
          </view>
        </view>
        <view class="block-item-space-between-view ">
          <view class="title"></view>
          <view class="value u-flex">
            <view>代金券支付金额：</view>
            <custom-price :price="order.balance" fontWeight="600" :size="40"></custom-price>
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="receiptShow" mode="bottom" border-radius="14" length="60%">
      <view class="receipt-header u-flex u-row-center">
        发票信息
      </view>
      <view v-if="!this.$u.test.isEmpty(order.receipt_history)">
        <view class="receipt-item u-flex u-row-between">
          <view class="title">发票类型</view>
          <view class="value">{{order.receipt_history.receipt_type | receiptType}}</view>
        </view>
        <view class="receipt-item u-flex u-row-between">
          <view class="title">发票抬头</view>
          <view class="value u-line-1">{{order.receipt_history.receipt_title}}</view>
        </view>
        <view class="receipt-item u-flex u-row-between">
          <view class="title">发票内容</view>
          <view class="value">{{order.receipt_history.receipt_content}}</view>
        </view>
        <view class="receipt-item u-flex u-row-between" v-if="order.receipt_history.tax_no">
          <view class="title">发票税号</view>
          <view class="value">{{order.receipt_history.tax_no}}</view>
        </view>
      </view>
    </u-popup>
    <view class="assemble-detail"
      v-if="order.order_status !== 'CONFIRM' && order.order_status !== 'CANCELLED' && order.order_type === 'PINTUAN'">
      <u-button shape="circle" :custom-style="customStyle" @click="assembleDetail(order)">查看拼团详情</u-button>
    </view>
    <u-divider>到底了哦~</u-divider>
  </view>
</template>

<script>
  import * as API_Order from '@/api/order.js'
  import * as API_Trade from '@/api/trade.js'

  export default {
    data() {
      return {
        orderSn: '',
        order: {
          order_operate_allowable_vo: {
            allow_pay: false,
            allow_ship: false,
            allow_rog: false,
          }
        },
        express: '',
        customStyle: {
          float: 'right',
          marginRight: '20rpx',
          marginBottom: '20rpx',
          width: '180rpx',
          height: '60rpx',
          fontSize: '25rpx',
        },
        receiptShow: false,
        giftList: [],
        giftCoupon: {},
        tradeAddins: {},
      };
    },
    onShow() {
      this.getDetail();
    },
    onLoad(options) {
      this.orderSn = options.orderSn;
      this.getDetail();
    },
    filters: {
      receiptType(type) {
        switch (type) {
          case 'VATORDINARY':
            return '增值税普通发票'
          case 'ELECTRO':
            return '电子普通发票'
          case 'VATOSPECIAL':
            return '增值税专用发票'
          default:
            return '不开发票'
        }
      }
    },
    methods: {
      goAddress(text) {
        console.log(text)
        if (['待付款', '待发货'].includes(text)) return this.$u.route(
          `/mine-module/address?type=orderDetail&id=${this.orderSn}`)
      },
      async getMembertradeAddins(id) {
        let res = await API_Trade.getMembertradeAddins(id)
        console.log(res)
        this.tradeAddins = res
      },
      getDetail() {
        API_Order.getOrderDetail(this.orderSn).then(res => {
          const order = res;
          order.order_sku_list.forEach(sku => {
            let specValues = "";
            if (sku.spec_list !== null) {
              sku.spec_list.forEach(spec => {
                specValues += spec.spec_value + ",";
              })
            }
            sku.spec_value_str = specValues.slice(0, specValues.length - 1);
          })
          this.order = order;
          console.log(11, this.order)
          this.getMembertradeAddins(this.order.order_id);
          // this.getMembertradeAddins(this.orderSn);
          this.giftList = this.order.gift_list;
          this.giftCoupon = this.order.gift_coupon;
          this.getExpress();
        })
      },
      //读取物流信息
      getExpress() {
        if (!this.order.order_operate_allowable_vo.allow_check_express) {
          return;
        }
        API_Trade.getExpress(this.order.logi_id, this.order.ship_no).then(res => {
          this.express = res;
        })
      },
      //查看商品
      onGoods(sku) {
        uni.navigateTo({
          url: '/goods-module/goods?goods_id=' + sku.goods_id,
        })
      },
      //查看物流
      onExpress(order) {
        uni.navigateTo({
          url: '/pages/order/express?logi_id=' + order.logi_id + '&ship_no=' + order.ship_no
        })
      },
      //申请售后
      applySale(sku) {
        uni.navigateTo({
          url: `/pages/order/after-sale/after-sale-select?sn=${this.orderSn}&sku=${encodeURIComponent(JSON.stringify(sku))}`
        })
      },
      assembleDetail(order) {},
      //查看发票
      onReceipt() {
        this.receiptShow = true;
      }
    }
  }
</script>

<style lang="scss">
  .order-status-view {
    background-color: #DF3A01;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 35rpx;
    /* #ifdef APP-PLUS */
    padding-top: 130rpx;
    /* #endif */
    /* #ifndef APP-PLUS */
    padding-top: 80rpx;
    /* #endif */
    padding-bottom: 20rpx;

    .status-text-view {
      display: flex;
      flex-direction: row;
      font-weight: 500;
    }

    .sub-text-view {
      margin-top: 10rpx;

      .sub-text {
        font-size: 25rpx;
      }
    }
  }

  .order-gift-view {
    background-color: #FFFFFF;
    border-radius: 10rpx;

    .gift-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 20rpx;

      .gift-title {
        font-size: 33rpx;
        font-weight: bold;
      }
    }

    .gift-list-view {
      padding: 0rpx 20rpx;
      padding-bottom: 10rpx;
      display: flex;
      flex-direction: row;
      line-height: 120rpx;

      .gift-img-view {
        position: relative;
      }
    }

    .gift-info-view {
      margin: 0rpx 20rpx;
      flex: 1;

      .gift-coupon-price {
        color: #f42424;
      }
    }

    .gift-price-view {
      text-align: right;

      .goods-price {
        font-weight: bold;
      }
    }
  }

  .order-list-view {
    background-color: #FFFFFF;
    border-radius: 10rpx;

    .order-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 20rpx;

      .order-sn {
        font-size: 33rpx;
        font-weight: bold;
      }

      .order-status {
        color: #FD5B00;
        font-weight: 500;
      }
    }

    .goods-list-view {
      padding: 0rpx 20rpx;
      padding-bottom: 10rpx;
    }

    .order-price-view {
      padding-right: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;

      .order-total-price {
        color: #82848a;
        margin-left: 10rpx;
      }

      .order-pay-price {
        font-size: 33;
        font-weight: 600;
        margin-left: 8rpx;
      }
    }

    .order-footer {
      padding: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .block-view {
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;

    .header {
      font-weight: 600;
      margin-bottom: 20rpx;
    }

    .block-item-view {
      display: flex;
      flex-direction: row;
      margin: 13rpx 0rpx;
      font-size: 25rpx;

      .title {
        width: 200rpx;
        font-size: 31rpx;
      }

      .value {
        font-weight: 600;
        font-size: 31rpx;
        word-break: break-all;
        width: 87%;
      }

      .click-color {
        color: $u-type-error;
      }
    }

    .block-item-space-between-view {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 13rpx 0rpx;
      font-size: 25rpx;

      .title {
        width: 200rpx;
        font-size: 31rpx;
      }

      .value {
        font-weight: 600;
        font-size: 31rpx;
      }
    }

    .express-item {
      .express-text {
        margin-left: 40rpx;
        font-size: 25rpx;

        .text {}

        .time {
          color: $u-tips-color;
          margin: 8rpx 0rpx;
          font-size: 26rpx;
        }
      }
    }
  }

  .receipt-header {
    margin: 20rpx 0rpx;
    font-size: 33rpx;
  }

  .receipt-item {
    margin: 20rpx 30rpx;

    .title {
      font-size: 30rpx;
      width: 400rpx;
    }

    .value {
      font-weight: 600;
      font-size: 31rpx;
    }
  }
</style>
